<template>
  <div class="bg-white rounded-20px p-30px h-full">
    <div class="flex items-center gap-10px">
      <el-image class="w-13px h-23px" :src="require('@/assets/images/analysis/before.png')" fit="contain"></el-image>
      <div class="text-20px font-bold text-black">在库数量</div>
    </div>
    <div class="mt-20px">
      <div class="flex items-start justify-between w-full">
        <div
          v-for="(item, index) in cardList"
          :key="index"
          class="card"
        >
          <div class="flex items-center justify-between gap-14px p-10px">
            <el-tooltip class="item" effect="dark" :content="item.name" placement="top">
              <div class="text-12px" style="color: #2386FF; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
              {{ item.name }}
              </div>
            </el-tooltip>
            <el-image class="w-15px h-14px" :src="require('@/assets/images/analysis/download.png')" fit="contain"></el-image>
          </div>
          <div class="line"></div>
          <el-scrollbar class="overflow-hidden" style="height: 270px;">
            <div class="p-10px">
              <div
                v-for="(citem, cindex) in item.data"
                :key="cindex"
                class="text-14px mb-10px"
                style="color: #616161;"
              >
                {{ citem.name }}：{{ citem.value }}
              </div>
            </div>
          </el-scrollbar>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "InStockData",
  data() {
    return {
      cardList: []
    };
  },
};
</script>

<style lang="scss" scoped>
.card {
  flex-shrink: 0;
  width: calc(100% / 4 - 16px);
  height: 330px;
  background: #FFFFFF;
  box-shadow: 2px 2px 5px 0px rgba(26,100,190,0.15), -2px -2px 5px 0px rgba(226,235,246,0.2);
  border-radius: 6px 6px 6px 6px;
}
.line {
  height: 2px;
  background: linear-gradient(to right, #E8EFF8, #F5F8FC);
}
</style>
